<template>
  <div class="agency-hall">
    <div class="agency-hall-content">
      <el-row>
        <type-screen
          ref="typeScreen"
          :category="category"
          :place-list="placeList"
          :product-name="productName"
          :stateList="stateList"
          :areaList="areaList"
          :furScreenList="furScreenList"
          @produceScreen="produceScreen"
          @placeScreen="placeScreen"
          @stateScreen="stateScreen"
          @areaScreen="areaScreen"
          @palceLetter="palceLetter"
          @nameLetter="nameLetter"
          @type_switch="type_switch"
          @typeScreen="typeScreen"
          @furPlaceScreen="furPlaceScreen"
          @materScreen="materScreen"
          @brandScreen="brandScreen"
          @furPlaceLetter="furPlaceLetter"
          @materLetter="materLetter"
        ></type-screen>
      </el-row>
      <el-row>
        <sort-bar
          ref="sortBar"
          :total="paginationQuery"
          :list-params="reqParams"
          :type_flag="type_flag"
          :furParams="furParams"
          @sort="changeSort"
          @prevPage="prevPageEvent"
          @nextPage="nextPageEvent"
        ></sort-bar>
      </el-row>
      <el-row class="agency-list-wrapper">
        <div v-show="loading" class="loading-mask">
          <div
            class="loading-wrap"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0)"
          ></div>
        </div>

        <agency-list
          :agency-list="agencyList"
          :furnitureList="furnitureList"
          :type_flag="type_flag"
        ></agency-list>
      </el-row>
      <el-row v-if="type_flag=='wood'">
        <el-pagination
          v-show="agencyList.length > 0"
          background
          layout="prev, pager, next, total, jumper"
          :page-size="wood_limit"
          :total="wood_total"
          :current-page="wood_curPage"
          @current-change="currentChange"
        ></el-pagination>
      </el-row>

      <el-row v-else>
        <el-pagination
          v-show="furnitureList.length > 0"
          background
          layout="prev, pager, next, total, jumper"
          :page-size="fur_limit"
          :total="fur_total"
          :current-page="fur_curPage"
          @current-change="currentChange"
        ></el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import TypeScreen from "./components/type-screen";
import SortBar from "./components/sort-bar";
import AgencyList from "./components/agency-list";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import api from "@/api/agencyProduct";
import axios from "axios";
import md5 from "@/utils/md5";
import {
  getProductStyle,
  getProductName,
  getProductPlace,
  getAgencyList,
  getProductState,
  getProductArea,
} from "@/api/agency";

export default {
  name: "agency",
  computed: {
    ...mapGetters(["memberInfo"]),
  },
  data() {
    return {
      type_flag: "wood",
      category: [],
      productName: [],
      placeList: [],
      agencyList: [],
      furnitureList: [],
      stateList: [],
      areaList: [],
      paginationQuery: {
        wood_total: 0,
        fur_total: 0,
      },
      parameterParmas: {
        areaId: "",
        placeId: "",
        stateId: "",
        woodnameId: "",
      },
      reqParams: {
        attr_area_id: "",
        attr_place_id: "",
        attr_state_id: "",
        attr_woodname_id: "",
        commission_rateOrder: "",
        is_deposit: "",
        is_password: "0",
        keyword: "",
        limit: "20",
        page: "1",
        product_stats: "",
        publish_timeOrder: "",
      },
      furParams: {
        attr_brand_id: "",
        attr_furniturecategory_id: "",
        attr_material_id: "",
        attr_place_id: "",
        commission_rateOrder: "",
        is_deposit: "",
        is_password: "",
        keyword: "",
        limit: "20",
        page: "1",
        product_stats: "",
        publish_timeOrder: "",
      },
      furScreenList: {},
      loading: true,
      wood_limit: 0,
      wood_total: 0,
      wood_totalPage: 1,
      wood_curPage: 1,
      fur_limit: 0,
      fur_total: 0,
      fur_totalPage: 1,
      fur_curPage: 1,
    };
  },
  created() {
    console.log("是否代理商", this.memberInfo.status);
    if (this.memberInfo.status == 1) {
      // 请求木材筛选列表
      this.getWoodScreenList(this.parameterParmas);
      // 请求木材货源列表
      this.getAgencyProductList(this.reqParams);
      // 请求家具筛选列表
      this.getFurScreenlist();
      // 请求家具货源列表
      this.getFurnitureList();
    } else {
      if (this.memberInfo.is_auth == 1) {
        this.$message.error("您还没加入云木屋代理，正在为您跳转");
        setTimeout(() => {
          this.$router.push({ name: "contractServices" });
        }, 1000);
      } else {
        this.$message.error("您还没有完成实名认证，正在为您跳转");
        setTimeout(() => {
          this.$router.push({ name: "explain" });
        }, 1000);
      }
    }
  },
  methods: {
    // 家具点击类型
    typeScreen(id) {
      this.furParams.page = 1;
      this.furParams.attr_furniturecategory_id = id == -1 ? "" : id;
      this.getFurnitureList();
    },
    // 家具点击产地
    furPlaceScreen(id) {
      this.furParams.page = 1;
      this.furParams.attr_place_id = id == -1 ? "" : id;
      this.getFurnitureList();
    },
    // 家具点击材质
    materScreen(id) {
      this.furParams.page = 1;
      this.furParams.attr_material_id = id == -1 ? "" : id;
      this.getFurnitureList();
    },
    // 家具点击品牌
    brandScreen(id) {
      this.furParams.page = 1;
      this.furParams.attr_brand_id = id == -1 ? "" : id;
      this.getFurnitureList();
    },
    // 家具产地字母筛选
    furPlaceLetter(val) {
      let obj = {
        initials: val,
      };
      for (let i in obj) {
        obj[i] = "" + obj[i];
      }
      console.log("获取家具产地列表参数", obj);
      console.log("转换为字符串的参数", JSON.stringify(obj));
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      axios
        .get(api.FURPLACE_URL, {
          params,
        })
        .then((res) => {
          console.log("字母筛选家具产地res", res);
          if (res.data.code == 0) {
            console.log("字母筛选家具产地请求成功", res);
            this.furScreenList.provinces = res.data.data;
          } else {
            console.log("字母筛选家具产地请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 家具材质字母筛选
    materLetter(val) {
      let obj = {
        initials: val,
      };
      for (let i in obj) {
        obj[i] = "" + obj[i];
      }
      console.log("获取家具材质列表参数", obj);
      console.log("转换为字符串的参数", JSON.stringify(obj));
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      axios
        .get(api.FURMATER_URL, {
          params,
        })
        .then((res) => {
          console.log("字母筛选家具材质res", res);
          if (res.data.code == 0) {
            console.log("字母筛选家具材质请求成功", res);
            this.furScreenList.materias = res.data.data;
          } else {
            console.log("字母筛选家具材质请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 木材/家具切换
    type_switch(type) {
      this.type_flag = type;
      if (type == "wood") {
        this.reqParams.is_password = "";
        this.reqParams.publish_timeOrder = "";
        this.reqParams.is_deposit = "";
        this.reqParams.product_stats = "";
        this.reqParams.commission_rateOrder = "";
        this.getAgencyProductList(this.reqParams);
      } else {
        this.furParams.is_password = "";
        this.furParams.publish_timeOrder = "";
        this.furParams.is_deposit = "";
        this.furParams.product_stats = "";
        this.furParams.commission_rateOrder = "";
        this.getFurnitureList();
      }
    },
    // 木材产地字母筛选
    palceLetter(val) {
      let obj = {
        areaId: this.parameterParmas.areaId,
        initials: val,
      };
      for (let i in obj) {
        obj[i] = "" + obj[i];
      }
      console.log("获取木材产地列表参数", obj);
      console.log("转换为字符串的参数", JSON.stringify(obj));
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      axios
        .get(api.PLACELIST_URL, {
          params,
        })
        .then((res) => {
          console.log("字母筛选产地res", res);
          if (res.data.code == 0) {
            console.log("字母筛选木材产地列表请求成功", res);
            this.placeList = res.data.data;
          } else {
            console.log("字母筛选木材产地列表请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 木材品名母筛选
    nameLetter(val) {
      let obj = {
        areaId: this.parameterParmas.areaId,
        initials: val,
        placeId: this.parameterParmas.placeId,
      };
      for (let i in obj) {
        obj[i] = "" + obj[i];
      }
      console.log("获取木材品名列表参数", obj);
      console.log("转换为字符串的参数", JSON.stringify(obj));
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      axios
        .get(api.WOODNAMELIST_URL, {
          params,
        })
        .then((res) => {
          console.log("字母筛选品名res", res);
          if (res.data.code == 0) {
            console.log("字母筛选品名列表请求成功", res);
            this.productName = res.data.data;
          } else {
            console.log("字母筛选品名列表请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取木材筛选列表
    getWoodScreenList(obj) {
      for (let i in obj) {
        obj[i] = "" + obj[i];
      }
      console.log("获取木材筛选列表参数", obj);
      console.log("转换为字符串的参数", JSON.stringify(obj));
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      axios
        .get(api.WOODSCREEN_URL, {
          params,
        })
        .then((res) => {
          console.log("获取木材筛选条件列表请求res", res);
          if (res.data.code == 0) {
            console.log("获取木材筛选条件列表请求成功", res);
            this.areaList = res.data.data.areas;
            this.placeList = res.data.data.places;
            this.productName = res.data.data.woodNames;
            this.stateList = res.data.data.states;
          } else {
            console.log("获取木材筛选条件列表请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取家具筛选列表
    getFurScreenlist() {
      axios
        .get(api.FURSCREEN_URL)
        .then((res) => {
          console.log("获取家具筛选条件列表请求res", res);
          if (res.data.code == 0) {
            this.furScreenList = res.data.data;
            console.log("家具筛选列表", this.furScreenList);
            console.log("获取家具筛选条件列表请求成功", res);
          } else {
            console.log("获取家具筛选条件列表请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取代理木材列表
    getAgencyProductList(obj) {
      this.loading = true;
      for (let i in obj) {
        obj[i] = "" + obj[i];
      }
      console.log("获取代理木材列表参数", obj);
      console.log("转换为字符串的参数", JSON.stringify(obj));
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      // let sign = md5.hex_md5(JSON.stringify(params));
      // console.log("sign", sign);
      axios
        .get(api.AGENCYPRODUCT_URL, {
          params,
        })
        .then((res) => {
          console.log("新版获取代理商品列表res", res);
          if (res.data.code == 0) {
            console.log("新版获取代理商品列表请求成功", res);
            this.agencyList = res.data.data.dataList;
            this.wood_total = res.data.data.total;
            this.wood_limit = res.data.data.limit;
            this.wood_totalPage = res.data.data.totalPage;
            this.wood_curPage = res.data.data.curPage;
            this.paginationQuery.wood_total = +res.data.data.total;
            console.log("木材列表", this.agencyList);
          } else {
            console.log("新版获取代理商品列表请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    // 获取代理家具列表
    getFurnitureList() {
      this.loading = true;
      let obj = this.furParams;
      for (let i in obj) {
        obj[i] = "" + obj[i];
      }
      console.log("获取代理家具列表参数", obj);
      console.log("转换为字符串的参数", JSON.stringify(obj));
      let str = md5.hex_md5(JSON.stringify(obj));
      let params = JSON.parse(JSON.stringify(obj));
      params.sign = str;
      axios
        .get(api.FURNITURELIST_URL, {
          params,
        })
        .then((res) => {
          console.log("获取代理家具列表res", res);
          if (res.data.code == 0) {
            console.log("获取代理家具列表请求成功", res);
            this.furnitureList = res.data.data.dataList;
            this.fur_total = res.data.data.total;
            this.fur_limit = res.data.data.limit;
            this.fur_totalPage = res.data.data.totalPage;
            this.fur_curPage = res.data.data.curPage;
            this.paginationQuery.fur_total = +res.data.data.total;
            console.log("家具列表", this.furnitureList);
          } else {
            console.log("获取代理家具列表请求失败", res);
          }
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },

    changeSort(obj, type) {
      console.log(this.type_flag);
      if (this.type_flag == "wood") {
        this.reqParams.page = "1";
        this.reqParams.is_deposit = obj.is_deposit;
        this.reqParams.is_password = obj.is_password;
        this.reqParams.publish_timeOrder = obj.publish_timeOrder;
        this.reqParams.product_stats = obj.product_stats;
        this.reqParams.commission_rateOrder = obj.commission_rateOrder;
        if (type) {
          console.log("是否默认", type);
          this.reqParams.attr_area_id = "";
          this.reqParams.attr_place_id = "";
          this.reqParams.attr_state_id = "";
          this.reqParams.attr_woodname_id = "";
          this.$refs.typeScreen.defalutHandle();
        }
        console.log("请求木材列表参数", this.reqParams);
        this.getAgencyProductList(this.reqParams);
      } else {
        this.furParams.page = "1";
        this.furParams.is_deposit = obj.is_deposit;
        this.furParams.is_password = obj.is_password;
        this.furParams.publish_timeOrder = obj.publish_timeOrder;
        this.furParams.product_stats = obj.product_stats;
        this.furParams.commission_rateOrder = obj.commission_rateOrder;
        if (type) {
          console.log("是否默认", type);
          this.furParams.attr_brand_id = "";
          this.furParams.attr_furniturecategory_id = "";
          this.furParams.attr_material_id = "";
          this.furParams.attr_place_id = "";
          this.$refs.typeScreen.defalutHandle();
          this.furPlaceLetter("");
          this.materLetter("");
        }
        console.log("请求家具列表参数", this.furParams);
        this.getFurnitureList();
      }
    },
    // 区域点击
    areaScreen(id, type) {
      console.log("区域", id, typeof id);
      this.reqParams.page = "1";
      this.reqParams.attr_woodname_id = "";
      this.reqParams.attr_place_id = "";
      this.parameterParmas.woodnameId = "";
      this.parameterParmas.placeId = "";
      if (type) {
        this.reqParams.attr_state_id = "";
        this.parameterParmas.stateId = "";
      }
      if (id == -1) {
        this.reqParams.attr_area_id = "";
        this.parameterParmas.areaId = "";
      } else {
        this.reqParams.attr_area_id = id;
        this.parameterParmas.areaId = id;
      }
      this.getWoodScreenList(this.parameterParmas);
      this.getAgencyProductList(this.reqParams);
    },
    // 品名点击
    produceScreen(id) {
      console.log("品名");
      this.reqParams.page = "1";
      if (id == -1) {
        this.reqParams.attr_woodname_id = "";
      } else {
        this.reqParams.attr_woodname_id = id;
      }
      this.getAgencyProductList(this.reqParams);
    },
    // 产地点击
    placeScreen(id) {
      console.log("产地");
      this.reqParams.page = "1";
      this.reqParams.attr_woodname_id = "";
      this.reqParams.attr_state_id = "";
      if (id == -1) {
        this.reqParams.attr_place_id = "";
        this.parameterParmas.placeId = "";
      } else {
        this.reqParams.attr_place_id = id;
        this.parameterParmas.placeId = id;
      }
      this.nameLetter("");
      this.getAgencyProductList(this.reqParams);
    },
    // 形态点击
    stateScreen(id) {
      this.reqParams.page = "1";
      console.log("形态", id);
      if (id == -1) {
        this.reqParams.attr_state_id = "";
      } else {
        this.reqParams.attr_state_id = id;
      }
      this.getAgencyProductList(this.reqParams);
    },
    prevPageEvent() {
      if (this.type_flag == "wood") {
        if (this.reqParams.page <= 1) return;
        this.reqParams.page--;
        this.getAgencyProductList(this.reqParams);
      } else {
        if (this.furParams.page <= 1) return;
        this.furParams.page--;
        this.getFurnitureList();
      }
    },
    nextPageEvent() {
      if (this.type_flag == "wood") {
        if (
          this.reqParams.page >=
          Math.ceil(this.paginationQuery.wood_total / this.reqParams.limit)
        )
          return;
        this.reqParams.page++;
        this.getAgencyProductList(this.reqParams);
      } else {
        if (
          this.furParams.page >=
          Math.ceil(this.paginationQuery.fur_total / this.furParams.limit)
        )
          return;
        this.furParams.page++;
        this.getFurnitureList();
      }
    },
    currentChange(index) {
      console.log(index);
      if (this.type_flag == "wood") {
        this.reqParams.page = index;
        this.getAgencyProductList(this.reqParams);
      } else {
        this.furParams.page = index;
        this.getFurnitureList();
      }
    },
  },
  components: {
    TypeScreen,
    SortBar,
    AgencyList,
  },
};
</script>
<style lang="scss" scoped>
.agency-hall {
  .agency-hall-content{
    min-width: 1400px;
  }
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0 auto;
  padding: 20px;
  .sort-bar {
    margin: 13px 0;
    background: #fff;
  }
  .type-screen {
    background: #fff;
  }
  .agency-list-wrapper {
    padding: 50px 30px;
    background: #fff;
    position: relative;
    .loading-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 88;
      background: rgba(255, 255, 255, 0.96);
    }
    .loading-wrap {
      width: 100%;
      height: 600px;
    }
  }
}
.el-pagination {
  background: #fff;
  padding: 0 60px 20px 0;
  text-align: right;
}
</style>
